Getting Started with Marketplace SDK

Learn how to integrate Marketplace SDK into your application with guidance on installation, configuration, and implementing the make offer feature

Getting Started

Let’s create a simple React application that can display and interact with collectibles. We’ll set up wallet connection and basic collectible viewing functionality.

1. Create a Project in Sequence Builder

   Before you begin coding, you’ll need to set up your project:

   1. Go to Sequence Builder
   2. Create a new project
   3. Follow our White-label Marketplace Guide
   4. Note down your Project ID and API Access Key
2. Create a New React Project

   We’ll use Vite with React and TypeScript for this guide. You can use any package manager, but we’ll use pnpm in our examples:

   # Create a new project
   pnpm create vite@latest my-marketplace-app -- --template react-ts
   
   # Navigate to the project directory
   cd my-marketplace-app
   
   # Install dependencies
   pnpm install
   
3. Install Required Dependencies

   Install the Marketplace SDK and its peer dependencies:

   pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
   
4. Create SDK Configuration

   Create a new file src/config/sdk.ts to store your SDK configuration:

   import type { SdkConfig } from "@0xsequence/marketplace-sdk";
   
   export const sdkConfig = {
     projectId: "YOUR_PROJECT_ID",
     projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
   } satisfies SdkConfig;
   

   Make sure to replace YOUR_PROJECT_ID and YOUR_PROJECT_ACCESS_KEY with your actual project credentials. You can find your Project ID at https://sequence.build/project/{YOUR_PROJECT_ID}/overview and your Project Access Key at https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys in the Sequence Builder dashboard.

5. Set Up Providers

   Create a new file src/providers.tsx to configure the necessary providers:

   import {
     MarketplaceProvider,
     MarketplaceQueryClientProvider,
     ModalProvider,
     createWagmiConfig,
     getQueryClient,
     marketplaceConfigOptions,
   } from "@0xsequence/marketplace-sdk/react";
   import { useQuery } from "@tanstack/react-query";
   import { WagmiProvider } from "wagmi";
   import {
     SequenceConnectProvider,
     type ConnectConfig,
   } from "@0xsequence/connect";
   import { sdkConfig } from "./config/sdk";
   
   interface ProvidersProps {
     children: React.ReactNode;
   }
   
   export default function Providers({ children }: ProvidersProps) {
     const queryClient = getQueryClient();
     const { data: marketplaceConfig, isLoading } = useQuery(
       marketplaceConfigOptions(sdkConfig),
       queryClient
     );
   
     if (isLoading) {
       return <div>Loading configuration...</div>;
     }
   
     if (!marketplaceConfig) {
       return <div>Failed to load marketplace configuration</div>;
     }
   
     const connectConfig: ConnectConfig = {
       projectAccessKey: sdkConfig.projectAccessKey,
       signIn: {
         projectName: marketplaceConfig.settings.title,
       },
     };
   
     const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);
   
     return (
       <WagmiProvider config={wagmiConfig}>
         <MarketplaceQueryClientProvider>
           <SequenceConnectProvider config={connectConfig}>
             <MarketplaceProvider config={sdkConfig}>
               {children}
               <ModalProvider />
             </MarketplaceProvider>
           </SequenceConnectProvider>
         </MarketplaceQueryClientProvider>
       </WagmiProvider>
     );
   }
   
6. Update Main Entry Point

   Update your main.tsx to use the Providers component:

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import App from './App'
   import Providers from './providers'
   import './index.css'
   
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <Providers>
         <App />
       </Providers>
     </React.StrictMode>
   )
   
7. Create Collectible Card Component

   Create a new component src/components/CollectibleCard.tsx to display and interact with collectibles:

   import {
   useCollectible,
   useMakeOfferModal,
   useMarketplaceConfig,
   useOpenConnectModal,
   } from "@0xsequence/marketplace-sdk/react";
   import type { Address } from "viem";
   import { useAccount } from "wagmi";
   
   export default function CollectibleCard() {
   const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
   const { isConnected } = useAccount()
   const { openConnectModal } = useOpenConnectModal()
   
   const collection = marketplaceConfig?.market.collections[0];
   const chainId = collection?.chainId as number;
   const collectionAddress = collection?.itemsAddress as Address;
   const collectibleId = "0";
   
   const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
   chainId,
   collectionAddress,
   collectibleId,
   });
   
   const { show } = useMakeOfferModal();
   
   if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
   if (collectibleError) return <div>Error: {collectibleError.message}</div>;
   if (!collectible) return <div>No collectible found</div>;
   
   return (
   <div>
     <img width={200} height={200} src={collectible.image} alt={collectible.name} />
     <h3>{collectible.name}</h3>
     {isConnected ? (
       <button
         onClick={() => {
           show({
             chainId,
             collectionAddress,
             collectibleId,
           });
         }}
       >
         Make Offer
       </button>
     ) : (
       <button onClick={() => openConnectModal()}>Connect Wallet</button>
     )}
   </div>
   );
   }
   

   Make sure you have minted at least one collectible in your collection, then use that collectible’s ID as the collectibleId

   While Sequence Connect is recommended for the best experience, you can use other wallet providers with the Marketplace SDK. For custom wallet connectors, see our guide on custom connectors.

8. Update App Component

   Update your App.tsx to use the new components:

   import NFTCard from "./nft-card";
   
   export default function App() {
   return (
       <NFTCard />
   );
   }
   
9. Run Your Application

   Start your development server:

   pnpm run dev
   

   Your marketplace application will be running at http://localhost:5173. You can now:

   1. Connect your wallet using the connect button
   2. View collectible details
   3. Make offers on the collectible using the Make Offer button

Next Steps

Now that you have the basics working, you can:

• Create collectible listings
• Manage orders
• Customize the UI
• Check out our other guides for more features

Need help? Join our Discord community.